<script setup lang="jsx">
import ProForm from "@/components/ProForm/index.vue";
import { h, ref, watch } from "vue";

const formData = ref({
  name: "初始值",
  transter: ["11"],
  imgUpload: [
    {
      name: 1,
      url: 'https://img0.baidu.com/it/u=202361835,3806649081&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
    },
    {
      name: 2,
      url: 'https://img0.baidu.com/it/u=937072262,2445742246&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
    },
    {
      name: 3,
      url: 'https://img2.baidu.com/it/u=2817526356,1385623556&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
    },
  ]
});

const loading = ref(false)
const options = ref();
setTimeout(() => {
  options.value = [
    {
      value1: "Beijing",
      label1: "北京",
    },
    {
      value1: "Shanghai",
      label1: "上海",
    },
    {
      value1: "Nanjing",
      label1: "南京",
    },
    {
      value1: "Chengdu",
      label1: "成都",
    },
    {
      value1: "Shenzhen",
      label1: "深圳",
    },
    {
      value1: "Guangzhou",
      label1: "广州",
      disabled: true,
    },
  ]
}, 2000)

const casOptions = ref([
  {
    value: "zhinan",
    label: "指南",
    children: [
      {
        value: "shejiyuanze",
        label: "设计原则",
        disabled: true,
        children: [
          {
            value: "yizhi",
            label: "一致",
          },
          {
            value: "fankui",
            label: "反馈",
          },
          {
            value: "xiaolv",
            label: "效率",
          },
          {
            value: "kekong",
            label: "可控",
          },
        ],
      },
      {
        value: "daohang",
        label: "导航",
        children: [
          {
            value: "cexiangdaohang",
            label: "侧向导航",
          },
          {
            value: "dingbudaohang",
            label: "顶部导航",
          },
        ],
      },
    ],
  },
  {
    value: "zujian",
    label: "组件",
    children: [
      {
        value: "basic",
        label: "Basic",
        children: [
          {
            value: "layout",
            label: "Layout 布局",
          },
          {
            value: "color",
            label: "Color 色彩",
          },
          {
            value: "typography",
            label: "Typography 字体",
          },
          {
            value: "icon",
            label: "Icon 图标",
          },
          {
            value: "button",
            label: "Button 按钮",
          },
        ],
      },
      {
        value: "form",
        label: "Form",
        children: [
          {
            value: "radio",
            label: "Radio 单选框",
          },
          {
            value: "checkbox",
            label: "Checkbox 多选框",
          },
          {
            value: "input",
            label: "Input 输入框",
          },
          {
            value: "input-number",
            label: "InputNumber 计数器",
          },
          {
            value: "select",
            label: "Select 选择器",
          },
          {
            value: "cascader",
            label: "Cascader 级联选择器",
          },
          {
            value: "switch",
            label: "Switch 开关",
          },
          {
            value: "slider",
            label: "Slider 滑块",
          },
          {
            value: "time-picker",
            label: "TimePicker 时间选择器",
          },
          {
            value: "date-picker",
            label: "DatePicker 日期选择器",
          },
          {
            value: "datetime-picker",
            label: "DateTimePicker 日期时间选择器",
          },
          {
            value: "upload",
            label: "Upload 上传",
          },
          {
            value: "rate",
            label: "Rate 评分",
          },
          {
            value: "form",
            label: "Form 表单",
          },
        ],
      },
      {
        value: "data",
        label: "Data",
        children: [
          {
            value: "table",
            label: "Table 表格",
          },
          {
            value: "tag",
            label: "Tag 标签",
          },
          {
            value: "progress",
            label: "Progress 进度条",
          },
          {
            value: "tree",
            label: "Tree 树形控件",
          },
          {
            value: "pagination",
            label: "Pagination 分页",
          },
          {
            value: "badge",
            label: "Badge 标记",
          },
        ],
      },
      {
        value: "notice",
        label: "Notice",
        children: [
          {
            value: "alert",
            label: "Alert 警告",
          },
          {
            value: "loading",
            label: "Loading 加载",
          },
          {
            value: "message",
            label: "Message 消息提示",
          },
          {
            value: "message-box",
            label: "MessageBox 弹框",
          },
          {
            value: "notification",
            label: "Notification 通知",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "menu",
            label: "NavMenu 导航菜单",
          },
          {
            value: "tabs",
            label: "Tabs 标签页",
          },
          {
            value: "breadcrumb",
            label: "Breadcrumb 面包屑",
          },
          {
            value: "dropdown",
            label: "Dropdown 下拉菜单",
          },
          {
            value: "steps",
            label: "Steps 步骤条",
          },
        ],
      },
      {
        value: "others",
        label: "Others",
        children: [
          {
            value: "dialog",
            label: "Dialog 对话框",
          },
          {
            value: "tooltip",
            label: "Tooltip 文字提示",
          },
          {
            value: "popover",
            label: "Popover 弹出框",
          },
          {
            value: "card",
            label: "Card 卡片",
          },
          {
            value: "carousel",
            label: "Carousel 走马灯",
          },
          {
            value: "collapse",
            label: "Collapse 折叠面板",
          },
        ],
      },
    ],
  },
  {
    value: "ziyuan",
    label: "资源",
    children: [
      {
        value: "axure",
        label: "Axure Components",
      },
      {
        value: "sketch",
        label: "Sketch Templates",
      },
      {
        value: "jiaohu",
        label: "组件交互文档",
      },
    ],
  },
]);

const transterData = ref([
  {
    label: "1",
    key: "11",
  },
  {
    label: "2",
    key: "12",
  },
  {
    label: "3",
    key: "3",
  },
  {
    label: "4",
    key: "4",
  },
  {
    label: "5",
    key: "5",
  },
]);

const formColumn = ref([
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Input",
      label: "输入框",
      prop: "name",
      maxlength: 100,
      placeholder: "请输入姓名",
      "show-word-limit": true,

      prefix: {
        render: () => h('i', { class: 'el-icon-edit', on: { click: () => { console.log('prefix') }} })
      },
      suffix: {
        render: () => h('i', { class: 'el-icon-edit', on: { click: () => { console.log('suffix') }} })
      },
      prepend: {
        render: () => h('i', { class: 'el-icon-edit', on: { click: () => { console.log('prepend') }} })
      },
      append: {
        render: () => h('i', { class: 'el-icon-edit', on: { click: () => { console.log('append') }} })
      },
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Autocomplete",
      label: "自动完成",
      prop: "ac",
      "fetch-suggestions"(qs, cb) {
        const result = qs
          ? loadAll().filter((item) => item.value.indexOf(qs) != -1)
          : loadAll();
        cb(result);
      },
      placeholder: "请输入",
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Checkbox",
      label: "复选框",
      prop: "fx",
      checkboxType: "button",
      max: 2,
      valueFiled: 'value1',
      labelFiled: 'label1',
      options: [
        {
          value1: 1,
          label1: "选项1",
          disabled: true,
          border: true,
        },
        {
          value1: 2,
          label1: "选项2",
        },
        {
          value1: 3,
          label1: "选项3",
          checked: true,
        },
      ],
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Radio",
      label: "单选框",
      prop: "dx",
      radioType: "button",
      options: [
        {
          value: 1,
          label: "选项1",
          // disabled: true,
          // border: true,
        },
        {
          value: 2,
          label: "选项2",
          border: true,
        },
        {
          value: 3,
          label: "选项3",
        },
      ],
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "InputNumber",
      prop: "in",
      label: "计数器",
      min: 2,
      max: 6,
      step: 2,
      "step-strictly": true,
      // controls: false,
      // 'controls-position': 'right'
      // label: '111',
      placeholder: "222",
      change(val) {
        // console.log('change', val)
      },
      blur(val) {
        // console.log('blur', val)
      },
      focus(val) {
        // console.log('focus', val)
      },
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Switch",
      prop: "kg",
      refName: "kaiguan",
      label: "开关",
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Select",
      prop: "xlk",
      label: "下拉框",
      refName: "seRef",
      multiple: true,
      // disabled: true,
      placeholder: "请选择",
      filterable: true,
      remote: true,
      clearable: true,
      "remote-method"(query) { // 模拟远程通过接口获取
        loading.value = true
        setTimeout(() => {
          options.value = options.value.filter(
            (item) => item.label.indexOf(query) !== -1
          );
          loading.value = false
        }, 1000)
      },
      // isGroup: true,
      // options: optionsGroup,
      options: options,
      valueFiled: 'value1',
      labelFiled: 'label1',
      loading: loading,
      change(val) {
        // console.log('change', val)
      },
      clear(val) {
        // console.log('clear', val)
      },
      blur(val) {
        // console.log('blur', val)
      },
      focus(val) {
        // console.log('focus', val)
      },
      visibleChange(val) {
        // console.log('visible-change', val)
      },
      removeTag(val) {
        // console.log('remove-tag', val)
      },
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Cascader",
      label: "级联选择器",
      prop: "jlxzq",
      props: {
        multiple: true,
        expandTrigger: "hover",
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            resolve(node.children);
          }, 300);
        },
      },
      options: casOptions.value,
      // disabled: true,
      // separator: '-',
      clearable: true,
      change(val) {
        // console.log('change', val)
      },
      expandChange(val) {
        // console.log('expandChange', val)
      },
      blur(val) {
        // console.log('blur', val)
      },
      focus(val) {
        // console.log('focus', val)
      },
      visibleChange(val) {
        // console.log('visible-change', val)
      },
      removeTag(val) {
        // console.log('remove-tag', val)
      },
    },
  },
  {
    comOpts: {
      xType: "Slider",
      prop: "slider",
      label: "滑块",
      // disabled: true,
      "show-input": true,
      // 'show-stops': true,
      max: 10,
      // range: true,
      change(e) {
        // console.log('change', e);
      },
      input(e) {
        // console.log('input', e);
      },
    },
  },
  {
    layout: {
      span: 8,
    },
    comOpts: {
      xType: "Rate",
      prop: "rate",
      label: "评分",
      // disabled: true,
      "allow-half": true,
      "show-text": true,
      change(val) {
        console.log("change", val);
      },
    },
  },
  {
    layout: {
      span: 16,
    },
    comOpts: {
      xType: "Transfer",
      prop: "transter",
      label: "穿梭框",
      data: transterData.value,
      filterable: true,
      // disabled: true,
      change(val) {
        console.log("change", val);
      },
      leftCheckChange(val) {
        console.log("leftCheckChange", val);
      },
      rightCheckChange(val) {
        console.log("rightCheckChange", val);
      },
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "TimePicker",
      prop: "tp1",
      label: "时间选择器",
      "picker-options": {
        start: "08:30",
        step: "00:15",
        end: "18:30",
      },
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "DatePicker",
      prop: "tp2",
      label: "时间选择器",
      type: "datetime",
      // readonly: true,
    },
    formItemOpt: {
      label: 11111,
      "label-width": "200px",
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Upload",
      prop: "imgUpload",
      label: "上传",
      multiple: true,
      // drag: false,
      // disabled: true,
      // trigger: {
      //   render(){
      //     return <div>

      //     </div>
      //   }
      // }
      // tip: {
      //   render(){
      //     return <div>不能上传超过10M的图片</div>
      //   }
      // }
    },
  },
]);
const rowLayout = {
  gutter: 20,
};

// 为了确保所有的ref都被返回了  可以在onMounted内使用ref
const FIRefs = (refs) => {
  // refs.acRef?.focus()
  // refs.inRef?.focus()
  // refs.seRef?.focus()
  setTimeout(() => {
    // refs.jlxzqRef?.clearCheckedNodes()
    // refs.transterRef?.clearQuery('right')
  }, 4000);
  // console.log('refs', refs.nameRef.select());
};

const loadAll = () => {
  return [
    { value: "vue", link: "https://github.com/vuejs/vue" },
    { value: "element", link: "https://github.com/ElemeFE/element" },
    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "vuex", link: "https://github.com/vuejs/vuex" },
    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
    { value: "babel", link: "https://github.com/babel/babel" },
  ];
};

const formAttr = {
  "label-width": "120px",
  "label-position": "right",
  "label-suffix": " :",
  // disabled: true
};
const formItem = ref();
const getFRef = (ref) => {
  formItem.value = ref;
};
const resetForm = () => {
  formItem.value.resetFields();
};

const formRules = {
  name: [
    { required: true, message: "请输入活动名称", trigger: "blur" },
    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  ],
  ac: [
    { required: true, message: "请输入", trigger: "blur" },
    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  ],
};

const submit = () => {
  console.log(formData);
  formItem.value.validate((valid) => {
    if (valid) {
      alert("submit!");
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};

watch(() => formData.value.dx, newVal => {
  console.log(newVal);
  if(newVal === 1){
    formColumn.value.push(
      {
        layout: {
          span: 12,
        },
        comOpts: {
          xType: "Input",
          label: "输入框",
          prop: "name1",
          maxlength: 100,
          placeholder: "请输入姓名1",
        },
      })

    console.log(formColumn.value);
  }
})
</script>

<template>
  <div class="pro-form">
    <ProForm
      :formData="formData"
      :formColumn="formColumn"
      :row-layout="rowLayout"
      :formAttr="formAttr"
      :formRules="formRules"
      @getFRef="getFRef"
      @getFIRefs="FIRefs"
    />
    <el-button type="primary" @click="submit" v-auth="['submit']"
      >提交</el-button
    >
    <el-button type="primary" @click="resetForm">重置数据</el-button>
  </div>
</template>

<style lang="scss" scoped>
.pro-form {
  background: #fff;
  box-sizing: border-box;
  margin: $margin;
}
</style>
